// Copyright 2025 piko
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

'use client'

import { imageSrcs } from '@/constants'
import { useRouter } from 'next/navigation'

export default function Images() {
  const router = useRouter()

  return (
    <div className="p-6">
      <h1 className="mb-4 text-lg font-semibold">Images</h1>
      <div className="flex gap-4">
        {imageSrcs.map((img) => (
          <img
            key={img.id}
            src={img.src}
            alt={`Image ${img.id}`}
            width={200}
            height={200}
            loading="lazy"
            className="block h-auto w-[200px] rounded object-cover"
            onClick={() => router.push(`/images/${img.id}`)}
          />
        ))}
      </div>
    </div>
  )
}
